/*
* @Description: 广告管理
* @Author: kanglin
* @Date: 2018-06-19 16:26:12
* @Copyright: Created by Panxsoft.
*/

<style lang="less" scoped rel="stylesheet/less" type="text/less">
  @deep: ~">>>";
  .v-customer-advert {
    padding: 20px;
  }

  @{deep} .ivu-modal-body {
    min-height: 450px;
  }

</style>

<template>
	<div class="v-customer-advert">
		<Tabs
			type="card"
			@on-click="handleClickTab">

			<TabPane
				:label="$t('common.create')"
				name="create">
				<advert-create
					ref="create"
					:language_index="language_index"
					:advert_types="advert_types"

					:bos-config="oss_sign"
					@postStore="postStoreData" />
			</TabPane>

			<TabPane
				:label="$t('common.check')"
				name="list">
				<advert-index
					:loading="is_list_loading"
					:edit="handleEditAdvert"
					:language_index="language_index"
					:advert_types="advert_types"
					@delete="handleDeleteAdvert"
					:adverts="adverts.data" />
				<br>

				<Row
					type="flex"
					justify="center">
					<Page
						:total="adverts.total"
						:current="adverts.current_page"
						:page-size="adverts.per_page"
						:page-size-opts="[15,20,50]"
						placement="top"
						show-sizer
						show-total
						@on-change="handlePageChange"
						@on-page-size-change="handlePageSizeChage" />

				</Row>

			</TabPane>
		</Tabs>

		<Modal
			v-model="is_show_modal"
			:title="$t('advert.edit_advert')"
			class-name="vertical-middle-modal"
			@on-cancel="hide_BannerModal"
		>
			<div slot="footer" />
			<advert-edit
				v-if="is_show_modal"
				:advert_types="advert_types"
				:language_index="language_index"
				:manufacturer_solo="manufacturer_solo"
				@update="updateAdvert"
			/>
		</Modal>

	</div>
</template>

<script>

import API_LIST from 'src/API_LIST';
import advertIndex from './index';
import advertCreate from './create';
import advertEdit from './edit';
import { mapMutations } from 'vuex';

export default {
	name: 'AdvertViews',
	components: {
		'advert-index': advertIndex,
		'advert-create': advertCreate,
		'advert-edit': advertEdit,
	},
	data() {
		return {
			queryForm: {},
			pageQueryForm: {
				per_page: 15,

				page: 1,
			}, // 分页参数
			adverts: {
				data: [],
				current_page: 1,
				per_page: 15,
				total: 0,
			}, // 广告信息

			// bos_config: {},
			// store_devices: [],
			oss_sign: {},
			advert_types: [],
			language_index: [], // 语言列表
			is_show_modal: false,

			manufacturer_solo: {},
			current_advert: {
				advert_type_id: 1, // 广告类别id 1 图片 2 视频
				name: null, // 广告名称
				// content_key: null, // 广告内容 bos的key值 ，create方法获取bos 配置
				play_second: 60, // 播放时长
				device_account_ids: [],
				redirectable_type: '',
				redirectable_id: 0,
			},
			is_list_loading: false, // 加载
			// packs: [],
			// products: [],
		};
	},
	mounted() {
		this.fetchInitialData();
		this.Common_langua();
	},
	methods: {
       	...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),


		/**
       *  请求广告列表
       * @param {object} params {查询参数}
       * @return {undefined}
       */
		fetchAdvertsIndex(params = {}) {
			this.is_list_loading = true;
			this.$http.get(API_LIST.HATHOR_ADVERT, { params })
				.then(({ data }) => {
					console.log(data);

					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						this.adverts.data = data.splash_adverts.data;
						this.adverts.current_page = data.splash_adverts.current_page;
						this.adverts.per_page = parseInt(data.splash_adverts.per_page, 10);
						this.adverts.total = data.splash_adverts.total;
					}
				})
				.catch((error) => {
					this.$Message.error(error.message);
				})
				.then(() => {
					this.is_list_loading = false;
				});
		},

		/**
       *  请求初始化数据
       *  @return {undefined}
       */
		fetchInitialData() {
			this.fetchCreateData();
			// this.fetchPacksData();
			// this.fetchAssetsData();
		},

		fetchCreateData() {
			this.$http.get(`${API_LIST.HATHOR_ADVERT}/create`)
				.then(({ data }) => {
					// console.log(data);
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						this.oss_sign = data.oss_sign;
						this.advert_types = data.advert_types;
					}
				})
				.catch((error) => {
					this.$Message.error(error.message);
				});
		},

		// fetchPacksData() {
		// 	this.$http.get(`${API_LIST.CUSTOMER_PACK}?per_page=1000`)
		// 		.then(({ data }) => {
		// 			if (data.code !== 0) {
		// 				throw new Error(data.error);
		// 			} else {
		// 				this.packs = data.packs.data;
		// 			}
		// 		})
		// 		.catch((error) => {
		// 			this.$Message.error(error.message);
		// 		});
		// },

		// fetchAssetsData() {
		// 	this.$http.get(`${API_LIST.CUST_PRODUCT}?per_page=1000`)
		// 		.then(({ data }) => {
		// 			if (data.code !== 0) {
		// 				throw new Error(data.error);
		// 			} else {
		// 				this.products = data.products.data;
		// 			}
		// 		})
		// 		.catch((error) => {
		// 			this.$Message.error(error.message);
		// 		});
		// },

		/**
       * 删除广告接口
       * @param  {Number} id {广告ID}
       * @return {undefined} {description}
       */
		// deleteAdvert(id) {
		// 	return this.$http.delete(`${API_LIST.HATHOR_ADVERT}/${id}`)
		// 		.then(({ data }) => {
		// 			if (data.code !== 0) {
		// 				throw new Error(data.error);
		// 			} else {
		// 				this.fetchAdvertsIndex(this.pageQueryForm);
		// 				return data;
		// 			}
		// 		});
		// },

		/**
       * 上传广告
       * @param {Object} form {新增表单数据}
       * @return {undefined}
       */
		// postAdvert(form) {
		// 	return this.$http.post(API_LIST.HATHOR_ADVERT, form)
		// 		.then(({ data }) => {
		// 			if (data.code !== 0) {
		// 				throw new Error(data.error);
		// 			} else {
		// 				return data;
		// 			}
		// 		});
		// },
		postStoreData(param) {
			this.showSpin(this.$t('common.please_wait'));


			this.$http.post(API_LIST.HATHOR_ADVERT, param)

				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.create_success'));

					this.$refs.create.handleReset('formValidate');

					// this.fetchEquipmentCategory();
				})

				.catch((err) => {
					this.$Message.error(err.message);
					console.log(err);
				})

				.then(this.closeSpin);
		},

		/**
       *  更新广告
       *  @param {Number} id {广告ID}
       *  @param {Object} form {更新表单数据}
       *  @return {undefined}
       */
		updateAdvert(id, param) {
			this.showSpin();
			// const body = { ...form, _method: 'put' };
			// return this.$http.post(`${API_LIST.HATHOR_ADVERT}/${id}`, body)
			// 	.then(({ data }) => {
			// 		if (data.code !== 0) {
			// 			throw new Error(data.error);
			// 		} else {
			// 			this.fetchAdvertsIndex(this.pageQueryForm);
			// 			this.is_show_modal = false;
			// 			return data;
			// 		}
			// 	});
		 this.$http.post(`${API_LIST.HATHOR_ADVERT}/${id}`, param)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.update_success'));

					this.is_show_modal = false;

					this.fetchAdvertsIndex(this.pageQueryForm);
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},

		/**
       * tab 被点击时触发
       * @param {String} tab_name {表单是label值}
       * @return {undefined}
       */
		handleClickTab(tab_name) {
			if (tab_name === 'list') {
				this.fetchAdvertsIndex(this.pageQueryForm);
			}
		},

		/**
       * 页码改变
       * @param  {string} page {当前页码}
       * @return {undefined}
       */
		handlePageChange(page) {
			this.pageQueryForm.page = page;
			this.fetchAdvertsIndex(this.pageQueryForm);
		},

		/**
       * 每页显示数改变
       * @param  {string} size {当前每页显示数}
       * @return {undefined}
       */
		handlePageSizeChage(size) {
			this.pageQueryForm.page = null;
			this.pageQueryForm.per_page = size;
			this.fetchAdvertsIndex(this.pageQueryForm);
		},

		/**
       * 删除广告
       * @param {Number} id {广告ID}
       * @return {undefined}
       */
		handleDeleteAdvert(id) {
          		this.$Modal.confirm({

				title: this.$t('product.tip'), // '温馨提示',
				content: this.$t('product.is_delete'), // '删除之后将无法恢复，确定吗？',
				onOk: () => {
					const param = {

						_method: 'DELETE',

					};
					this.table_loading = true;

					this.$http.post(`${API_LIST.HATHOR_ADVERT}/${id}`, param)

						.then(({ data }) => {
							if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

							this.fetchAdvertsIndex(this.pageQueryForm);

							this.$Message.success(this.$t('common.delete_success'));
						})

						.catch((err) => {
							this.$Message.error(err.message || err.statusText);
						})

						.then(() => { this.table_loading = false; });
				},
				onCancel: () => {},

			});
		},

		/**
       * 编辑
       * @param {Object} detail {广告详情对象}
       * @return {undefined}
       */
		handleEditAdvert(detail) {
			this.manufacturer_solo = detail;
			this.is_show_modal = true;
		},

	   	hide_BannerModal() {
			this.manufacturer_solo = null;
		},


		// 请求语言列表
		Common_langua() {
			this.$http.get(`${API_LIST.COMMON_LANGUAGE}`)
				.then(({ data }) => {
					if (parseInt(data.code) !== 0) throw new Error(data.error);
					this.language_index = data.languages;
				})
				.catch((err) => {
					this.$Message.error(err.message);
				});
		},
	},
};
</script>
